<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="">
    <input type="text" name="title" id=""><br>
    <select name="cate_id" id="">
      <option value="1">音乐</option>
      <option value="2">体育</option>
    </select><br>
    <input id="file" type="file" name="" id=""><br>
    <button>确认添加</button>
  </form>

  <script>
    document.querySelector('form').onsubmit = function (e) {
      e.preventDefault();
      // let fd =new FormData(表单的DOM对象)
      let fd = new FormData(this);

      // 可以对数据进行处理
      // 修改fd对象中的一个值
      fd.set('title', 'hello');
      // 向fd对象中追加一个值
      fd.append('gender', '男');
      // 向fd中追加一个文件对象
      let wenjianyu = document.querySelector('#file');
      let fileObj = wenjianyu.files[0];
      fd.append('cover_img', fileObj);
      // console.log(fd);
      // 剪裁fd中有哪些数据 -- 用 forEach 才能得到
      fd.forEach((item, index) => {
        console.log(index, item);
      })
      // ajax提交给接口

    }


  </script>

</body>

</html>